<template>
	<div class="remenyinyue">
		<div class="remenyinyue1">
			<ul>
				<li v-for="(item,index) in 60" :key="index">
					{{index}}
				</li>
			</ul>
		</div>
		
		<div class="remenbiaoge">
			<table cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th>音乐</th>
						<th @click="qiehuan">
							<div class="juzhongbiao">
								<div class="shangxia1">时长</div>
								<div class="shangxia2">
									<i class="el-icon-caret-top" :class="{'bianse':huan==1}"></i>
									<i class="el-icon-caret-bottom" :class="{'bianse':huan==2}"></i>
								</div>
							</div>
						</th>
						<th @click="qiehuan1">
							<div class="shiyongrenshu">
								<div class="shangxia1">使用人数</div>
								<div class="shangxia2">
									<i class="el-icon-caret-top" :class="{'bianse':huan1==1}"></i>
									<i class="el-icon-caret-bottom" :class="{'bianse':huan1==2}"></i>
								</div>
							</div>
						</th>
						<th @click="qiehuan2">
							<div class="renznengliang">
								<div class="shangxia1">使用人数增量</div>
								<div class="shangxia2">
									<i class="el-icon-caret-top" :class="{'bianse':huan2==1}"></i>
									<i class="el-icon-caret-bottom" :class="{'bianse':huan2==2}"></i>
								</div>
							</div>
						</th>
						<th>热门视频</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in 5" :key="index">
						<td>
							<div class="biaoyi">
								<div class="biaoyixia">
									<img src="../../../assets/img/kuaishou.png" />
									<div @click="dianji(index)" class="bofang">
										<i v-if="bangding==index?false:true" class="el-icon-video-play"></i>
										<i v-else class="el-icon-video-pause"></i>
									</div>
								</div>
								<div class="biaoxiashu">
									<p>Shots</p>
									<p>Tonia & the Beat</p>
								</div>
							</div>
						</td>
						<td>30秒</td>
						<td>{{shu1 | guolv}}</td>
						<td>{{shu | guolv}}</td>
						<td>
							<ul>
								<li v-for="(item1,index1) in 5" :key="index1">
									<img src="../../../assets/img/yuanqi3.png" />
									<div class="yinying">
										<img src="../../../assets/img/dianzan2.png" />
										<span>{{shu | guolv}}</span>
									</div>
								</li>
							</ul>
						</td>
						<td>
							<img class="xianshuju1" src="../../../assets/img/shuju1.png" />
							<img class="xianshuju2" src="../../../assets/img/shuju2.png" />
							
							<img @click="aixindian(index)" v-if="aixinxian!=index" src="../../../assets/img/aixin1.png" />
							<img @click="aixindian(index)" v-if="aixinxian==index" src="../../../assets/img/aixin2.png" />
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div class="fenye" style="text-align: center;">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :hide-on-single-page="yindi"
			  :current-page="currentPage4"
			  :page-sizes="[100, 200, 300, 400]"
			  :page-size="100"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="4001">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default{
		name:"remenyinyue",
		data(){
			return{
				shu:50321,
				shu1:44635525,
				xianshi:true,
				bangding:'',
				
				qie:0,
				huan:0,
				
				qie1:0,
				huan1:0,
				
				qie2:0,
				huan2:0,
				
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1,
				
				//操作
				aixinxian:-1,
			}
		},
		activated() {
			
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			//数据图标hover效果
			$(".xianshuju1").hover(function(){
				$(this).css({"display":'none'});
				$(this).siblings(".xianshuju2").css({"display":'block'});
			},function(){
				$(this).css({"display":'block'});
				$(this).siblings(".xianshuju2").css({"display":'none'});
			})
			
			$(".remenyinyue1 ul li").click(function(){
				$(this).css({
					'color': '#fff',
					'background-color': '#0091FF',
					'border-radius':'0.05rem' ,
				})
				$(this).siblings().css({
					'color': '#999',
					'background-color': '#fff',
					'border-radius':'0rem' ,
				})
			})
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		methods:{
			//操作
			aixindian(index){
				this.aixinxian=index;
			},
			
			//分页
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			
			//时长
			qiehuan(){
				if(this.qie==0){
					this.huan=1;
					this.qie+=1;
				}else if(this.qie==1){
					this.huan=2;
					this.qie=3;
				}else if(this.qie==3){
					this.huan=0;
					this.qie=0;
				}
				
				this.qie1=0;
				this.huan1=0;
				
				this.qie2=0;
				this.huan2=0;
			},
			//使用人数
			qiehuan1(){
				if(this.qie1==0){
					this.huan1=1;
					this.qie1+=1;
				}else if(this.qie1==1){
					this.huan1=2;
					this.qie1=3;
				}else if(this.qie1==3){
					this.huan1=0;
					this.qie1=0;
				}
				
				this.qie=0;
				this.huan=0;
				
				this.qie2=0;
				this.huan2=0;
			},
			//使用人数增量
			qiehuan2(){
				if(this.qie2==0){
					this.huan2=1;
					this.qie2+=1;
				}else if(this.qie2==1){
					this.huan2=2;
					this.qie2=3;
				}else if(this.qie2==3){
					this.huan2=0;
					this.qie2=0;
				}
				
				this.qie=0;
				this.huan=0;
				
				this.qie1=0;
				this.huan1=0;
			},
			
			dianji(index){
				this.bangding=index;
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.remenyinyue{
		
		.remenyinyue1{
			background-color: #fff;
			border-radius:0.1rem ;
			padding: 0.6rem 0.3rem;
			box-sizing: border-box;
			position: relative;
			ul{
				list-style: none;
				display: flex;
				align-items: center;
				text-align: center;
				flex-wrap: wrap;
				position: relative;
				z-index: 2;
				
				li{
					transition: all 0.3s ease;
					cursor: pointer;
					width: 3rem;
					padding: 0.4rem 0.4rem;
					color: #999999;
					font-size: 0.4rem;
				}
				li:nth-of-type(1){
					color: #fff;
					background-color: #0091FF;
					border-radius:0.05rem ;
				}
			}
		}
		
		.remenbiaoge{
			background-color: #fff;
			border-radius:0.1rem ;
			margin-top:1rem ;
			padding:1rem 0 ;
			
			table{
				width: 100%;
				
				thead{
					th{
						color: #333333;
						font-size: 0.45rem;
						padding: 0.6rem 0;
						font-weight: normal;
					}
					th:nth-of-type(2){
						cursor: pointer;
						box-sizing: border-box;
						.juzhongbiao{
							padding-left:1.4rem ;
							box-sizing: border-box;
							margin: auto;
							.shangxia1{
								float: left;
							}
							.shangxia2{
								float: left;
								box-sizing: border-box;
								margin-left:0.2rem ;
								font-size: 0.4rem;
								margin-top:0.02rem ;
								color: #999999;
								
								i{
									display: block;
								}
								i:nth-of-type(2){
									margin-top:-0.2rem ;
								}
								.bianse{
									color:#1890FF ;
								}
							}
						}
						.juzhongbiao::after{
							content: "";
							display: block;
							clear: both;
						}
					}
					th:nth-of-type(3){
						cursor: pointer;
						box-sizing: border-box;
						.shiyongrenshu{
							padding-left:1.4rem ;
							box-sizing: border-box;
							margin: auto;
							.shangxia1{
								float: left;
							}
							.shangxia2{
								float: left;
								box-sizing: border-box;
								margin-left:0.2rem ;
								font-size: 0.4rem;
								margin-top:0.02rem ;
								color: #999999;
								
								i{
									display: block;
								}
								i:nth-of-type(2){
									margin-top:-0.2rem ;
								}
								.bianse{
									color:#1890FF ;
								}
							}
						}
						.shiyongrenshu::after{
							content: "";
							display: block;
							clear: both;
						}
					}
					th:nth-of-type(4){
						cursor: pointer;
						box-sizing: border-box;
						.renznengliang{
							padding-left:1.8rem ;
							box-sizing: border-box;
							margin: auto;
							.shangxia1{
								float: left;
							}
							.shangxia2{
								float: left;
								box-sizing: border-box;
								margin-left:0.2rem ;
								font-size: 0.4rem;
								margin-top:0.02rem ;
								color: #999999;
								
								i{
									display: block;
								}
								i:nth-of-type(2){
									margin-top:-0.2rem ;
								}
								.bianse{
									color:#1890FF ;
								}
							}
						}
						.renznengliang::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
				tbody{
					
					tr:hover td{
						// cursor: pointer;
						background-color: #E5F4FF;
					}
					
					td{
						padding: 0.6rem 0;
						color: #333333;
						font-size: 0.4rem;
						text-align: center;
					}
					td:nth-of-type(1){
						.biaoyi{
							width:65%;
							margin: auto;
							display: flex;
							justify-content: space-around;
							align-items: center;
							
							.biaoyixia{
								position: relative;
								img{
									width: 1.5rem;
								}
								
								.bofang{
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									background-color: rgba(0,0,0,0.7);
									color: #fff;
									text-align: center;
									padding: 0.31rem 0;
									font-size: 0.7rem;
									cursor: pointer;
								}
							}
							.biaoxiashu{
								text-align: left;
								margin-left:1rem ;
								
								p{
									color: #333333;
									font-size: 0.4rem;
								}
								
								p:nth-of-type(2){
									margin-top:0.3rem ;
									color: #999999;
									font-size: 0.35rem;
								}
							}
						}
					}
					td:nth-of-type(5){
						width: 11rem;
						padding:0 1.5rem ;
						
						ul{
							list-style: none;
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							li{
								position: relative;
								img{
									width:2rem;
								}
							}
							.yinying{
								position: absolute;
								bottom: 0.1rem;
								left: 0;
								width: 100%;
								height: 20%;
								background-color: rgba(0,0,0,0.6);
								display: flex;
								justify-content: space-around;
								align-items: center;
								text-align: center;
								cursor: pointer;
								
								img{
									width: 0.3rem;
								}
								span{
									color: #fff;
									font-size: 0.4rem;
								}
							}
						}
					}
					td:nth-of-type(6){
						display: flex;
						justify-content: space-around;
						align-items: center;
						padding: 2rem 0.4rem;
						
						img{
							cursor: pointer;
							width: 0.5rem;
							height: 0.5rem;
						}
						
						.xianshuju1{
							margin-right:0.3rem ;
						}
						.xianshuju2{
							margin-right:0.3rem ;
							display: none;
						}
						
					}
				}
			}
		}
	}
</style>
<style  lang="scss">
	.el-submenu .el-menu-item {
	    height: 50px;
	    line-height: 50px;
	    padding: 0 0;
	    min-width: 1rem;
	}
</style>
	